<template>
  <div v-if="order">
    <van-panel title="收货信息">
      <van-cell-group>
        <van-cell v-if="order && order.address" :title="address_title" is-link :label="address_body"></van-cell>
      </van-cell-group>
    </van-panel>
    <van-panel title="订单信息" class="border-block">
      <van-card v-for="(item, index) in order.detail" :title="item.product_title" :desc="item.sku_name" :num="item.amount" :price="item.price" :thumb="item.product_image + '?imageView2/1/w/120/h/120/q/75'" :key="index" @click="onDetailClick(item)"/>
      <van-cell-group>
        <van-cell title="配送方式" value="普通快递"></van-cell>
        <van-cell title="运费" :value="'￥' + order.express_fee"></van-cell>
        <van-cell title="合计" :value="'￥' + order.money"></van-cell>
      </van-cell-group>
    </van-panel>
    <van-cell-group class="border-block">
      <van-cell title="买家留言" :value="order.customer_message"></van-cell>
    </van-cell-group>
    <van-submit-bar custom-class="mk-submit-bar" :price="money" buttonText="立即支付" @submit="payPro" />
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />
  </div>
</template>

<script>
import Toast from 'vant-weapp/dist/toast/toast'
import Dialog from 'vant-weapp/dist/dialog/dialog'
import * as OrderAction from '@/api/order'

export default {
  data () {
    return {
      product_id: '',
      order: null,
      money: null,
      submit_loading: false,
      payForm: null,
      confirm_order: null
    }
  },
  computed: {
    address_title () {
      if (!this.order || !this.order.address) return ''
      return this.order.address.name + ' ' + this.order.address.tel
    },
    address_body () {
      if (!this.order || !this.order.address) return ''
      return (
        this.order.address.province +
        ' ' +
        this.order.address.city +
        ' ' +
        this.order.address.county +
        ' ' +
        this.order.address.address_detail
      )
    }
  },
  methods: {
    // 支付
    payPro () {
      OrderAction.pay(this.$root.$mp.query.id)
        .then(data => {
          this.payForm = data
          this.payMoney(this.$root.$mp.query.id)
        })
        .catch(error => {
          Toast('支付失败')
          console.log(error)
        })
    },
    onDetailClick (item) {
      wx.navigateTo({
        url: '../product/detail?id=' + item.product_id
      })
    },
    payMoney (id) {
      wx.requestPayment({
        timeStamp: this.payForm.timestamp, // 时间戳
        nonceStr: this.payForm.nonceStr, // 随机字符串
        package: this.payForm.package, // 统一下单接口返回的 prepay_id 参数值
        signType: this.payForm.signType, // 加密方式
        paySign: this.payForm.paySign, // 签名
        fail: function () {
          Toast.fail('支付失败')
        },
        success: function (res) {
          Dialog.confirm({
            title: '提示',
            message: '您是否支付成功'
          }).then(() => {
            Toast.success('支付成功...页面正在跳转....')
            wx.redirectTo({
              url: 'detail?id=' + id
            })
          }).catch(() => {
            Toast.fail('支付失败')
          })
        }
      })
    },
    fetchOrder () {
      OrderAction.show(this.$root.$mp.query.id)
        .then(data => {
          this.order = data
          this.product_id = data.detail[0].product_id
          this.money = data.money * 1 * 100
          wx.hideNavigationBarLoading()
        })
        .catch(err => Toast(err.msg))
    }
  },
  beforeMount () {
    wx.showNavigationBarLoading()
    this.fetchOrder()
  }
}
</script>

<style lang="less" scoped>
.border-block {
  margin-top: 10rpx
}
</style>